<template>
  <div class="app-container home">
    <el-container>
      <!--      <el-header >商城经营数据</el-header>-->
      <el-main>
        <el-row>
          <el-col :span="12">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                align-items: center;
              "
              class="title"
            >
              <p style="font-weight: bold; font-size: 15px">项目信息</p>
              <a href="/entrustedManagement/project" style="color: #35d9d9"
                >更多</a
              >
            </div>
            <el-table
              :data="info.engineeringList"
              style="width: 100%; background: rgba(22, 61, 119, 0.25)"
            >
              <el-table-column
                prop="engineeringNumber"
                label="工程编号"
                width="80"
              ></el-table-column>
              <el-table-column prop="name" label="工程名称"></el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template slot-scope="scope">
                  <span>{{ gc_engineering_status[scope.row.status] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 0 10px 20px;
              "
              class="title"
            >
              <p style="font-weight: bold; font-size: 15px">进度信息</p>
              <a href="/entrustedManagement/bulletin" style="color: #35d9d9"
                >更多</a
              >
            </div>
            <el-table
              :highlight-selection-row="false"
              :highlight-current-row="false"
              :stripe="false"
              :border="false"
              :data="info.weeklyReportList"
              style="
                margin: 0 0 10px 20px;
                width: 100%;
                background: rgba(22, 61, 119, 0.25);
                border: none;
              "
            >
              <el-table-column
                prop="engineeringNumber"
                label="工程编号"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="engineeringName"
                label="工程名称"
              ></el-table-column>
              <el-table-column prop="doneTotal" label="进度"  width="100">
                <template slot-scope="scope">
                  {{scope.row.allprogress + '%'}}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0 0">
          <el-col :span="12">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                align-items: center;
              "
              class="title"
            >
              <p style="font-weight: bold; font-size: 15px">委托信息统计</p>
            </div>
            <div
              ref="stackedLineChart"
              style="
                width: 100%;
                height: 400px;
                background: rgba(22, 61, 119, 0.25);
              "
            ></div>
          </el-col>
          <el-col :span="12">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 0 10px 20px;
              "
              class="title"
            >
              <p style="font-weight: bold; font-size: 15px">检测报告统计</p>
            </div>
            <div
              ref="doubleBarChart"
              style="
                width: 100%;
                height: 400px;
                background: rgba(22, 61, 119, 0.25);
                margin: 0 0 0 20px;
              "
            ></div>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="5">
            <span class="exp-b center">{{numberOfEnterprise}}</span>
          </el-col>
          <el-col :span="5">
            <span class="exp-b center">{{numberOfCommission}}</span>
          </el-col>
          <el-col :span="5">
            <span class="exp-b center">{{numberOfEngineering}}</span>
          </el-col>
          <el-col :span="9">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="grid-content bg-purple center">企业数量</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light center">委托数量</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple center">工程数量</div>
          </el-col>
          <el-col :span="9">
          </el-col>
        </el-row> -->
      </el-main>
    </el-container>

    <!-- <el-container>
      <el-main>
        <el-row>
          <el-col :span="24">
            <p style="font-weight :bold ;  font-size: 15px;text-align: left;">团购平台经营数据</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <span class="exp-b center" @click="toAudit">{{approvalInBusiness}}</span>
          </el-col>
          <el-col :span="5">
            <span class="exp-b center" @click="stores">{{storeNumber}}</span>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="grid-content bg-purple center">待审核入驻商家</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light center">门店数量</div>
          </el-col>

        </el-row>
      </el-main>
    </el-container> -->
  </div>
</template>

<script>
import {
  numberOfEnterprise,
  numberOfCommission,
  numberOfEngineering,
  getInfo,
} from "@/api";
import {
  countToSendProductNum,
  orderInRefund,
  goodsShelves,
  merchantsToBeAudited,
  numberOfStores,
} from "@/api/HomePage";
import * as echarts from "echarts";
import Cookies from "js-cookie";

export default {
  name: "Index",
  data() {
    return {
      gc_engineering_status: [],
      info: {},
      numberOfEnterprise: 0,
      numberOfCommission: 0,
      numberOfEngineering: 0,
      // 版本号
      version: "3.7.0",
      //商城代发货订单
      toSendProductNum: 0,
      //退款中订单
      refundTrade: 0,
      //上架商品
      itemUpshelf: 0,
      //待审核入住商家
      approvalInBusiness: 0,
      //门店数量
      storeNumber: 0,
      projectData: [
        { index: 1, name: "工程A", status: "进行中" },
        { index: 2, name: "工程B", status: "已完成" },
        { index: 3, name: "工程C", status: "未开始" },
        { index: 4, name: "工程D", status: "进行中" },
        { index: 5, name: "工程E", status: "已完成" },
      ],
      progressData: [
        { index: 1, name: "工程A", progress: "50%" },
        { index: 2, name: "工程B", progress: "100%" },
        { index: 3, name: "工程C", progress: "0%" },
        { index: 4, name: "工程D", progress: "75%" },
        { index: 5, name: "工程E", progress: "100%" },
      ],
      roleId: null,
      roles: [],
      enterpriseId: null,
    };
  },
  created() {
    //当前用户的信息
    let userInfo = JSON.parse(Cookies.get("userinfo"));
    this.roles = userInfo.roles;
    this.roleId = userInfo.roleId;
    this.enterpriseId = userInfo.enterpriseId;

    // this.enterpriseNum();
    // this.commissionNum();
    // this.engineeringNum();

    // let timer = setInterval(() =>{
    //   this.countToSendProductNum ();
    //   this.orderInRefund();
    //   this.goodsShelves();
    //   this. merchantsToBeAudited();
    //   this. numberOfStores();
    // },60000)

    //室外字典
    this.getDicts("gc_engineering_status").then((response) => {
      let data = response.data;
      let new_arr = [];
      data.forEach(function (item) {
        new_arr[item.dictValue] = item.dictLabel;
      });
      this.gc_engineering_status = new_arr;
    });
  },
  mounted() {
    this.initIndex();
  },
  methods: {
    // 获取首页
    initIndex() {
      let enterpriseId = 0;
      for (let i = 0; i < this.roles.length; i++) {
        if (this.roles[i].roleId == 6 || this.roles[i].roleId == 9) {
          enterpriseId = this.enterpriseId;
          break;
        }
      }

      getInfo(enterpriseId).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.info = res.data;
          this.initStackedLineChart();
          this.initDoubleBarChart();
        }
      });
    },
    initDoubleBarChart() {
      const chartDom = this.$refs.doubleBarChart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["室内", "现场"],
          textStyle: {
            color: "#fff", // 图例文字颜色改为白色
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: "#fff", // x轴线颜色
            },
          },
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            color: "#fff", // x轴标签颜色
            fontSize: 12,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff", // y轴线颜色
            },
          },
          axisLabel: {
            color: "#fff", // y轴标签颜色
            fontSize: 12,
          },
        },
        series: [
          {
            name: "室内",
            type: "bar",
            data: this.info.reporShineiArr,
            itemStyle: {
              color: "#67C23A", // 柱状图颜色（绿色）
            },
            label: {
              // 可选：柱状图上显示数值标签
              show: true,
              position: "top",
              color: "#fff", // 标签文字颜色
            },
          },
          {
            name: "现场",
            type: "bar",
            data: this.info.reporShiwaiArr,
            itemStyle: {
              color: "#F56C6C", // 柱状图颜色（红色）
            },
            label: {
              // 可选：柱状图上显示数值标签
              show: true,
              position: "top",
              color: "#fff", // 标签文字颜色
            },
          },
        ],
      };

      myChart.setOption(option);

      // 响应式调整
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 统计工程数量
    engineeringNum() {
      numberOfEngineering().then((response) => {
        this.numberOfEngineering = response.data;
      });
    },
    // 统计委托数量
    commissionNum() {
      numberOfCommission().then((response) => {
        this.numberOfCommission = response.data;
      });
    },
    // 统计企业数量
    enterpriseNum() {
      numberOfEnterprise().then((response) => {
        this.numberOfEnterprise = response.data;
      });
    },
    //商城代发货订单
    countToSendProductNum() {
      countToSendProductNum().then((response) => {
        this.toSendProductNum = response.data;
      });
    },

    sendGoods() {
      this.$router.push({
        path: "/shopping/mallOrder",
        query: { orderState: "wait_ship" },
      });
    },
    //退款中订单
    orderInRefund() {
      orderInRefund().then((response) => {
        this.refundTrade = response.data;
      });
    },
    refund() {
      this.$router.push({
        path: "/shopping/mallAfterSaleOrder",
        query: { refundStatus: "apply" },
      });
    },
    //上架商品
    goodsShelves() {
      goodsShelves().then((response) => {
        this.itemUpshelf = response.data;
      });
    },
    shelves() {
      this.$router.push({
        path: "/shopping/mallProduct",
        query: { isShow: "Y" },
      });
    },
    //待审核入住商家
    merchantsToBeAudited() {
      merchantsToBeAudited().then((response) => {
        this.approvalInBusiness = response.data;
      });
    },
    toAudit() {
      this.$router.push({
        path: "/store/storeApply",
        query: { applyState: "audit_IN" },
      });
    },
    //门店数量
    numberOfStores() {
      numberOfStores().then((response) => {
        this.storeNumber = response.data;
      });
    },
    stores() {
      this.$router.push({ path: "/store/store" });
    },

    goTarget(href) {
      window.open(href, "_blank");
    },
    initStackedLineChart() {
      const chartDom = this.$refs.stackedLineChart;
      const myChart = echarts.init(chartDom);
      console.log(this.info);

      const option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["直接访问", "搜索引擎"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: "#fff", // 设置y轴线颜色为白色
            },
          },
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            color: "#fff", // 修改X轴文字颜色
            fontSize: 12, // 可选：调整字体大小
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff", // 设置y轴线颜色为白色
            },
          },
          axisLabel: {
            color: "#fff", // 修改X轴文字颜色
            fontSize: 12, // 可选：调整字体大小
          },
        },
        series: [
          {
            name: "委托单数量",
            type: "line",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            stack: "总量",
            smooth: true,
            data: this.info.commissionArr,
          },
          {
            name: "委托工程数量",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            smooth: true,
            data: this.info.engineeringArr,
          },
        ],
      };

      myChart.setOption(option);

      // 响应式调整
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
/* 取消 el-table 行悬停背景色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
  border: none !important;
}
::v-deep tr {
  &:nth-of-type(1) {
    background: linear-gradient(147deg, #0069f8 0%, #2f9cff 100%);
  }
}
::v-deep .el-table__row {
  background: none !important;
  color: #fff;
}
::v-deep .el-table .el-table__header-wrapper th {
  background: none !important;
  color: #fff;
}
.home {
  background: url("../assets/images/index-bg.png");
  .el-main {
    background: url("../assets/images/index-bg.png");
    background-size: cover;
    padding: 0;
    .title {
      background: url("../assets/images/title.png") no-repeat;
      background-size: cover;
      height: 30px;
      padding: 0 20px 0 0;
      p {
        color: #fff;
        margin: 0 0 0 40px;
      }
    }
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.home {
  background-color: #f5f5f5;
}
.el-container {
  background-color: #ffffff;
  margin-bottom: 20px;
}
.el-containerel-container .el-header {
  font-weight: bold;
  text-align: center;
  line-height: 60px;
}
.center {
  text-align: center;
  display: block;
}
.grid-content {
  font-weight: 600;
  padding: 15px 0;
}
.exp-b {
  font-size: 30px;
  font-weight: bold;
}
</style>

<style>
/* 配置CSS字体大小为20px 同时 字体加粗 */
</style>
